<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% load static %}
    <link rel="icon" href="{% static 'book/favicon.ico' %}" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="{% static 'book/normalize.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'book/demo.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'book/cs-select.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'book/cs-skin-boxes.css' %}"/>
    <title>选择时间</title>
</head>
<body class="color-6">
<div class="container">
    <header class="codrops-header">
        <h1>选择时间</h1>
    </header>
    <form method="post" action="/book/{{ stu_id }}/{{ s_field }}/">
        {% csrf_token %}
        <section>
            <label class="select-label">时间:
                <select class="cs-select cs-skin-boxes" name="s_time">
                    <option value="1" data-class="color-588c75" checked>9:00-10:00</option>
                    <option value="2" data-class="color-b0c47f">10:00-11:00</option>
                    <option value="3" data-class="color-f3e395">11:00-12:00</option>
                    <option value="4" data-class="color-f3ae73">12:00-13:00</option>
                    <option value="5" data-class="color-da645a">13:00-14:00</option>
                    <option value="6" data-class="color-79a38f">14:00-15:00</option>
                    <option value="7" data-class="color-c1d099">15:00-16:00</option>
                    <option value="8" data-class="color-f5eaaa">16:00-17:00</option>
                    <option value="9" data-class="color-f5be8f">17:00-18:00</option>
                    <option value="10" data-class="color-e1837b">18:00-19:00</option>
                    <option value="11" data-class="color-9bbaab">19:00-20:00</option>
                    <option value="12" data-class="color-d1dcb2">20:00-21:00</option>
                    <option value="13" data-class="color-f9eec0">21:00-22:00</option>
                </select>
            </label>
        </section>
        <style>
            .btn {
                position: absolute;
                right: 40px;
                bottom: 40px;
                background-color: rgb(39, 143, 247);
                background-image: none;
                border-bottom-color: rgb(255, 255, 255);
                border-bottom-style: none;
                border-bottom-width: 0px;
                border-image-repeat: stretch;
                border-image-source: none;
                border-image-width: 1;
                border-left-color: rgb(255, 255, 255);
                border-left-style: none;
                border-left-width: 0px;
                border-right-color: rgb(255, 255, 255);
                border-right-style: none;
                border-right-width: 0px;
                border-top-color: rgb(255, 255, 255);
                border-radius: 4px;
                border-top-style: none;
                border-top-width: 0px;
                box-sizing: border-box;
                color: rgb(255, 255, 255);
                cursor: pointer;
                display: block;
                font-family: sans-serif, Verdana;
                font-feature-settings: normal;
                font-kerning: auto;
                font-language-override: normal;
                font-optical-sizing: auto;
                font-size: 17.5px;
                font-size-adjust: none;
                font-stretch: 100%;
                font-style: normal;
                font-variant-alternates: normal;
                font-variant-caps: normal;
                font-variant-east-asian: normal;
                font-variant-ligatures: normal;
                font-variant-numeric: normal;
                font-variant-position: normal;
                font-variation-settings: normal;
                font-weight: 400;
                line-height: 25px;
                margin-bottom: 10px;
                margin-right: 10px;
                padding: 10px 25px;
                text-align: center;
                touch-action: manipulation;
                transition-delay: 0s, 0s;
                transition-duration: 0.3s, 0.3s;
                transition-property: box-shadow, border;
                transition-timing-function: ease, ease;
                user-select: none;
                vertical-align: middle;
                white-space: nowrap;
                width: 200px
            }
        </style>
        <div>
            <label style="color: red">以下时间段还可以选择：</label>
            <style>
                li {
                    width: 120px;
                    position: relative;
                    display: inline-list-item;
                    padding: 2px 2px;
                    border: 1px solid;
                }
            </style>
            <ul>
                {% for s in selected_time %}
                    <li><span style="color: #2b2b2b">{{ s }}</span></li>
                {% endfor %}
            </ul>
        </div>
        <div>
            <section class="row btn-row">
                <input type="hidden" name="execution" value="e2s1"><input type="hidden" name="_eventId"
                                                                          value="submit"><input
                    type="hidden" name="geolocation"><input class="btn btn-submit btn-block" name="submit"
                                                            accesskey="l" value=">>>点击预订" tabindex="6"
                                                            type="submit"></section>
        </div>
    </form>
</div>
<script src="{% static 'book/classie.js' %} "></script>
<script src="{% static 'book/selectFx.js' %}"></script>
<script>
    (function () {
        [].slice.call(document.querySelectorAll('select.cs-select')).forEach(function (el) {
            new SelectFx(el);
        });
    })();
</script>
</body>
</html>